/*
* @Description:合约调用-链码调用
* @Author: lil
* @Date: 2021/11/25
**/
<template>
  <div class="contract-called">
    <!-- 链码调用 -->
    <el-col :span="8">
      <div class="set item">
        <p>参数设置</p>
        <div class="set-bd">
          <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="节点" prop="node">
              <el-select v-model="form.node" placeholder="请选择节点" @change="getChaincodesByPeer">
                <el-option v-for="item in nodes" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="合约" prop="contract">
              <el-select v-model="form.contract" placeholder="请选择合约" @change="getChaincodeInterfaces">
                <el-option v-for="item in contracts" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="接口" prop="port">
              <el-select v-model="form.port" placeholder="请选择接口">
                <el-option v-for="item in ports" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="合约版本" prop="contractVersion">
              <el-select v-model="form.contractVersion" placeholder="请选择合约版本">
                <el-option v-for="item in contractVersions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="通道" prop="channel">
              <el-select v-model="form.channel" placeholder="请选择通道">
                <el-option v-for="item in channels" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div class="interface-param">
            <p>接口参数</p>
            <el-input type="textarea" v-model="interfacePara" placeholder='如：{"Name":"李四","Age":24}'></el-input>
            <el-button type="primary" @click="submit">提交</el-button>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="13">
      <div class="result item">
        <p>调试结果</p>
        <div class="result-bd">
          {{data[0]}}
        </div>
      </div>
    </el-col>
  </div>
</template>
<script>
  import {
    getPeers,
    getChaincodeNameByPeer,
    getInterfaceVCByChaincodeName,
    invokeResolution
  } from '@/api/blockchain/blockchaindeploy'

  export default {

    data() {
      return {
        form: {
          node: '',
          channel: '',
          contract: '',
          port: '',
          contractVersion: ''
        },
        interfacePara: '',
        nodes: [],
        contracts: [],
        ports: [],
        contractVersions: [],
        channels: [],
        data: '',
        rules: {
          node: [{
            required: true,
            message: "节点不能为空！",
            trigger: "change",
          }],
          channel: [{
            required: true,
            message: "通道不能为空！",
            trigger: "change",
          }],
          contract: [{
            required: true,
            message: "合约不能为空！",
            trigger: "change",
          }],
          port: [{
            required: true,
            message: "接口不能为空！",
            trigger: "change",
          }],
          contractVersion: [{
            required: true,
            message: "合约版本不能为空！",
            trigger: "change",
          }],
        }
      };
    },

    mounted() {
      this.getAllPeers();
    },

    methods: {
      getAllPeers() {
        var _this = this;
        getPeers().then(function (res) {
          _this.nodes = [];
          for (let i = 0; i < res.data.length; i++) {
            _this.nodes.push({
              label: '',
              value: ''
            });
            _this.nodes[i].label = res.data[i];
            _this.nodes[i].value = i;
          }
        }).catch((err) => {
          console.log(err);
        });
      },
      getChaincodesByPeer() {
        var _this = this;
        getChaincodeNameByPeer(this.nodes[this.form.node].label).then(function (res) {
          _this.contracts = [];
          _this.form.contract = '';
          _this.form.channel = '';
          _this.channels = [];
          _this.form.port = '';
          _this.ports = [];
          _this.form.contractVersion = '';
          _this.contractVersions = [];
          _this.$nextTick(function () {
            _this.$refs.form.clearValidate();
          });
          for (let i = 0; i < res.data.length; i++) {
            _this.contracts.push({
              label: '',
              value: ''
            });
            _this.contracts[i].label = res.data[i];
            _this.contracts[i].value = i;
          }
        }).catch((err) => {
          console.log(err);
        });
      },
      getChaincodeInterfaces() {
        var _this = this;
        getInterfaceVCByChaincodeName(this.nodes[this.form.node].label + "," + this.contracts[this.form.contract]
            .label + ',' + 0)
          .then(function (res) {
            _this.ports = [];
            for (let i = 0; i < res.data.interface.length; i++) {
              _this.ports.push({
                label: '',
                value: ''
              });
              _this.ports[i].label = res.data.interface[i];
              _this.ports[i].value = i;
            }
            for (let i = 0; i < res.data.channel.length; i++) {
              _this.channels.push({
                label: '',
                value: ''
              });
              _this.channels[i].label = res.data.channel[i];
              _this.channels[i].value = i;
            }
            _this.contractVersions.push({
              label: '',
              value: ''
            });
            _this.contractVersions[0].label = res.data.version;
            _this.contractVersions[0].value = 0;
          }).catch((err) => {
            console.log(err);
          });
      },
      submit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            let listPara = [];
            listPara.push(this.interfacePara);
            invokeResolution(this.nodes[this.form.node].label,
              this.ports[this.form.port].label,
              this.channels[this.form.channel].label,
              this.contracts[this.form.contract].label,
              listPara).then((res) => {
              this.data = [];
              this.data.push({
                "data": res.data,
                "message": res.msg,
                "code": res.code
              });
            }).catch((err) => {
              console.log(err);
            });
          }
        })
      }
    },
  };

</script>
<style lang="scss" scoped>
  .contract-called {
    .item {
      border: 1px solid #e0e6f0;
      background-color: #fff;
      min-height: 750px;

      &>p {
        height: 40px;
        margin: 0;
        font-size: 14px;
        font-weight: bold;
        color: #353535;
        padding-left: 10px;
        line-height: 40px;
        border-bottom: 1px solid #e0e6f0;
      }
    }

    .set-bd {
      p {
        color: #2a344c;
        font-size: 14px;
      }

      .el-form {
        display: flex;
        flex-flow: wrap;

        .el-form-item {
          width: 170px;

          &:not(:nth-child(3n)) {
            margin-right: 10px;
          }
        }
      }

      .interface-param {
        padding: 10px;
        margin-top: 170px;

        .el-textarea,
        .el-textarea>>>.el-textarea__inner {
          height: 165px;
        }

        .el-button {
          margin: 45px auto;
          display: block;
        }
      }
    }

    .result {
      background-color: #e7e9ef;

      p {
        background-color: #cfd6e4;
      }

      .result-bd {}
    }
  }

</style>
